<h1>
	Ajax Implementation
</h1>
<div id="ajax" class="sect">
	<h2>
		Ajax的定义
	</h2>
	<p>
		“异步JavaScript与XML（Ajax）”与是几种开发技术汇总的名称，用于开发Web交互程序或富介面的互联网程序。利用Ajax，可不在影响现有页面之交互的情况下，达到与服务端异步式的数据获取，当前页面无须一定的变化。负责数据交互的是
		<a href="http://www.w3.org/TR/XMLHttpRequest/">XHR对象</A>，基于各浏览器其实现XHR方式的不同，Ajax框架都提供一个抽象接口，处理了这些差并异集中在一个可复用的编程基建中，而在Ext中，负责这些任务的正是Ext.Ajax对象。
	</p>
</div>
<div id="ajax-ext" class="sect">
	<h2>
		Ext.Ajax
	</h2>
	<p>
		Ext.Ajax对象继承自Ext.data.Connection，定义为单例提供了一个既统一又高度灵活的Ajax通迅服务。利用这个单例对象，就可以处理全体Ajax请求，并执行相关的方法、事件和参数。
	</p>
</div>

<div id="ajax-events" class="sect">
	<h2>
		Ext.Ajax的事件
	</h2>
	<p>
		每次请求都触发事件，这是全局规定的。
		<ul>
			<li>
				<b>beforerequest (conn, opts)</B>
				<div>
					任何Ajax请求发送之前触发。
				</DIV>
			</li>
			<li>
				<b>requestcomplete (conn, response, opts)</B>
				<div>
					任何Ajax成功请求后触发。
				</DIV>
			</li>
			<li>
				<b>requestexception (conn, response, opts)</B>
				<div>
					服务端返回一个错误的HTTP状态码时触发。
				</DIV>
			</li>
		</ul>
	</p>
	<pre>
// Example:  例子:凡是Ajax通迅都会通过spinner告知状态如何。
Ext.Ajax.on(<span class="string">'beforerequest'</span>, this.showSpinner, this);
Ext.Ajax.on(<span class="string">'requestcomplete'</span>, this.hideSpinner, this);
Ext.Ajax.on(<span class="string">'requestexception'</span>, this.hideSpinner, this);
</pre>
</div>

<div id="ajax-properties" class="sect">
	<h2>
		Ext.Ajax的属性
	</h2>
	<p>
		由于Ext.Ajax是
		<a href="http://extjs.com/learn/Manual:Intro:Patterns:Singleton">单例</A>，所以你可以在发起请求的时候才覆盖Ext.Ajax属性。这些是最常见的属性：




	
	<ul>
		<li>
			<b>method：</B>用于请求的默认方法，注意这里大小写有关系的，应为是全部大写（默认为undefined，如不设置参数就是"POST"，否则是"GET"）。

		</li>
		<li>
			<b>extraParams：</B>收集各属性的对象，每次发起请求就会把该对象身上的各属性作为参数发送出去（默认为undefined）需要与Session信息和其它数据交互就要在这里设置。
		</li>
		<li>
			<b>url：</B>
			请求目标的服务器地址（默认为undefined），如果服务端都用一个url来接收请求，那么在这里设置过一次就足够了。
		</li>
		<li>
			<b>defaultHeaders：</B>对请求头部设置的对象（默认为undefined）。
		</LI>
	</ul>
	</p>
	<pre>
// 每次请求都将这字段与信息注入到头部中去。
Ext.Ajax.defaultHeaders = {
    'Powered-By': 'Ext Core'
};
</pre>
</div>

<div id="ajax-request" class="sect">
	<h2>
		Ext.Ajax.request
	</h2>
	<p>
		Ext.Ajax.request就是发送与接收服务端函数的函数。服务端返用
		<a href="http://www.w3.org/TR/XMLHttpRequest/#response-entity-body">response</A>以决定执行success或failure函数。注意这种success/failure函数是异步的，即就是服务端有响应后客户端这边回头调用（回调函数），期用客户端的Web页面还可以进行其它任务的操作。
	</p>
	<pre>
Ext.Ajax.request({
   url: <span class="string">'ajax_demo/sample.json'</span>,
   success: <span class="keyword">function</span>(response, opts) {
      var obj = Ext.decode(response.responseText);
      console.dir(obj);
   },
   failure: <span class="keyword">function</span>(response, opts) {
      console.log(<span class="string">'服务端失效的状态代码： '</span> + response.status);
   }
});
</pre>
</div>

<div id="ajax-updater" class="sect">
	<h2>
		Ext.Updater
	</h2>
	<p>
		Ajax另外一个常见用法是动态更新页面中的原素不需要刷新页面。response方法暴露了el配置项，在请求之后根据内容设置到元素的innerHTML。

	</p>
</div>

<div id="ajax-form" class="sect">
	<h2>
		表单的Ajax式提交
	</h2>
	<p>
		用Ext.Ajax.request 的配置项提交表单:

	</p>

	<pre>
Ext.Ajax.request({
   url: <span class="string">'ajax_demo/sample.json'</span>,
   form: <span class="string">'myForm'</span>,
   success: <span class="keyword">function</span>(response, opts) {
      var obj = Ext.decode(response.responseText);
      console.dir(obj);
   },
   failure: <span class="keyword">function</span>(response, opts) {
      console.log('服务端失效的状态代码 ' + response.status);
   }
});
</pre>
</div>

